<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
        <meta name="format-detection" content="telephone=no"/>
        <title>图片列表</title>
        <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" href="../../script/ccssoft/css/ccssoft-lite.css" />
        <link rel="stylesheet" type="text/css" href="./picOfflineUploadDetail.css" />
    </head>
    <body>
        <script id="picListId-template" type="text/x-dot-template">
            {{ for(var i=0, len=it.length; i < len; i++) {}}
            <div class="cardDiv" id="{{=it[i].id}}" projectId="{{=it[i].projectid}}" imgpath="{{=it[i].imgpath}}" onclick="openImg('{{=it[i].imgpath}}');">
            <div class="cardLabel"><img class="aui-img-object aui-pull-left" src="{{=it[i].imgpath}}" height="73" width="48"></div>
            <div class="cardCon">
            <div class="stationName"><font style="color:#ADADAD">巡检项目:</font>{{=it[i].projectname}}</div>
            <div class="saveDate"><font style="color:#ADADAD">时间：</font>{{=it[i].savedate}}</div>
            </div>
            </div>
            {{ } }}
        </script>
        <script id="billPicListId-template" type="text/x-dot-template">
            {{ for(var i=0, len=it.length; i < len; i++) {}}
            <div class="cardDiv" id="{{=it[i].id}}" billid="{{=it[i].billid}}" imgpath="{{=it[i].imgpath}}" onclick="openImg('{{=it[i].imgpath}}');">
            <div class="cardLabel"><img class="aui-img-object aui-pull-left" src="{{=it[i].imgpath}}" height="73" width="48"></div>
            <div class="cardCon">
            <div class="stationid"><font style="color:#ADADAD">站址项目:</font>{{=it[i].stationid}}</div>
            <div class="saveDate"><font style="color:#ADADAD">时间：</font>{{=it[i].savedate}}</div>
            </div>
            </div>
            {{ } }}
        </script>
        <div id="wrap">
            <div class="aui-tab">
                <ul class="aui-tab-nav" id="uploadPicTab">
                    <li class="active">
                        巡检图片
                    </li>
                    <li>
                        工单图片
                    </li>
                </ul>
            </div>
            <div id="tabBox">
                <div id='tab1' style="display: block">
                    <div id="picListId" style="overflow:auto;margin-bottom:55px;">
                        <div id="noData" style="display:none;text-align:center;font-size:14px;margin-top:10px;height:40px;line-height:40px;">
                            ------暂无数据------
                        </div>
                    </div>
                    <footer id="footer" style="height:50px;display:none;margin-bottom:55px;">
                        <div id="finishBottom" class="fixed_bottom">
                            <button class="outline center aui-btn aui-btn-success" onclick="uploadAll();">
                                一键上传
                            </button>
                        </div>
                    </footer>
                </div>
                <div id="tab2" style="display: none">
                    <div id="billPicListId" style="overflow:auto;margin-bottom:55px;">
                        <div id="noBillData" style="display:none;text-align:center;font-size:14px;margin-top:10px;height:40px;line-height:40px;">
                            ------暂无数据------
                        </div>
                    </div>
                    <footer id="billFooter" style="height:50px;display:none;margin-bottom:55px;">
                        <div id="finishBottom" class="fixed_bottom">
                            <button class="outline center aui-btn aui-btn-success" onclick="uploadAll();">
                                一键上传
                            </button>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="../../script/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/doT.min.js"></script>
    <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/debug.js"></script>
    <script type="text/javascript" src="../../script/config.js"></script>
    <script type="text/javascript" src="../../script/client.api.js"></script>
    <script type="text/javascript" src="../../script/aui-alert.js"></script>
    <script type="text/javascript" src="../../script/xunjian_db.js"></script>
    <script>
        apiready = function() {
            var projectId = "";
            var user = $api.getStorage('user');
            showMask("加载中...");
            //status bar style
            api.setStatusBarStyle({
                style : 'light'
            });
            $('#uploadPicTab li').click(function(index) {
                $(this).addClass('active').siblings().removeClass('active');
                $('#tab' + ($(this).index() + 1)).show().siblings().hide();
            });
            //图片存储数据库初始化
            db_init(function(ret, err) {
                if (ret) {
                    //获取巡检图片
                    db_getXunjianPic(user.userid, "", function(ret1, err) {
                        if (ret1 != "undefined" && ret1 != null) {
                            //判断是否有未上传的图片
                            if (ret1.length <= 0) {
                                $('#noData').show();
                            } else {
                                renderTemp('picListId', 'picListId-template', ret1);
                                api.pageParam.picInfo = ret1;
                            }
                            hideMask();
                            api.parseTapmode();
                        } else {
                            $('#noData').show();
                            hideMask();
                            showToast("数据加载失败！");
                        }
                    });
                    //获取数据图片数量，如果不存在需上传图片，则把上传按钮屏蔽
                    db_getXunjianPicCount(user.userid, function(ret2, err) {
                        if (ret2 > 0) {
                            $("#footer").show();
                        }
                    });
                    //获取工单图片
                    db_getBillPic(user.userid, "", function(ret1, err) {
                        if (ret1 != "undefined" && ret1 != null) {
                            //判断是否有未上传的图片
                            if (ret1.length <= 0) {
                                $('#noBillData').show();
                            } else {
                                renderTemp('billPicListId', 'billPicListId-template', ret1);
                                api.pageParam.billPicInfo = ret1;
                            }
                            hideMask();
                            api.parseTapmode();
                        } else {
                            $('#noBillData').show();
                            hideMask();
                            showToast("数据加载失败！");
                        }
                    });

                    //获取数据图片数量，如果不存在需上传图片，则把上传按钮屏蔽
                    db_getBillPicCount(user.userid, function(ret2, err) {
                        if (ret2 > 0) {
                            $("#billFooter").show();
                        }
                    });
                } else {
                    hideMask();
                    showToast("数据库初始化失败！");
                }
            });
        };
        function uploadAll() {
            var connType = api.connectionType;
            if (connType != "wifi" && connType != "ethernet") {
                api.confirm({
                    title : '网络提醒',
                    msg : '当前网络不是WiFi，是否继续上传？',
                    buttons : ['确定', '取消']
                }, function(ret, err) {
                    if (ret.buttonIndex == 1) {
                        uploadImg();
                    }
                });
            } else {
                if (api.pageParam.picInfo.length > 0) {
                    uploadImg();
                } else if (api.pageParam.billPicInfo.length > 0) {
                    uploadBillImg();
                }
            }
        }

        function uploadImg() {
            var picInfo = api.pageParam.picInfo;
            if (picInfo != null && picInfo != "undefined") {
                var size = picInfo.length;
                showMask("正在上传...");
                uploadImage(0, size, picInfo, 'xunjian');
            } else {
                showToast("暂无可上传图片!");
            }
        }

        function uploadBillImg() {
            var billPicInfo = api.pageParam.billPicInfo;
            if (billPicInfo != null && billPicInfo != "undefined") {
                var size = billPicInfo.length;
                showMask("正在上传...");
                uploadImage(0, size, billPicInfo, 'bill');
            } else {
                showToast("暂无可上传图片!");
            }
        }

        /**
         *上传图片到服务器
         */
        function uploadImage(index, size, info, type) {
            if (index >= size) {
                setTimeout(function() {
                    hideMask();
                    showToast("图片上传成功!");
                   // api.closeWin();
                }, 200);
                return;
            }
            var data = info[index];
            if (type == 'xunjian') {
                var opts = {
                    isJson : true,
                    lon : data.lon,
                    lat : data.lat,
                    id : data.projectid,
                    imgDate : data.savedate
                };
                $client.uploadProjectImage(opts, data.imgpath, function(ret, err) {
                    if (ret && ret.success) {
                        //删除已上传的图片在本地数据库记录
                        db_removeXunjianPic(data.id, function(ret1, err) {
                        });
                        //循环上传图片
                        uploadImage(++index, size, info);
                    } else {
                        hideMask();
                        showToast("上传图片失败!");
                        return;
                    }
                });
            } else if (type == 'bill') {
                var user = $api.getStorage('user');
                var opts = {
                    isJson : true,
                    //                  lon : data.lon,
                    //                  lat : data.lat,
                    businessid : data.businessid,
                    billsn : data.billsn,
                    billid : data.billid,
                    imgDate : data.savedate,
                    userid : user.userid,
                    loginname : user.username
                };
                $client.uploadBillImage(opts, data.imgpath, function(ret, err) {
                    if (ret && ret.success) {
                        //删除已上传的图片在本地数据库记录
                        //                      db_removeBillPic(data.id, function(ret1, err) {
                        //                      });
                        //循环上传图片
                        uploadImage(++index, size, info);
                    } else {
                        hideMask();
                        showToast("上传图片失败!");
                        return;
                    }
                });
            }
        }

        /**
         *打开图片
         */
        function openImg(imgPath) {
            showlog("openImg:" + imgPath);
            var module = api.require('imageBrowser');
            module.openImages({
                imageUrls : [imgPath],
                showList : false
            });
            return;
        }
    </script>
</html>
